<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{myAge}}</h2>
        <button @click="updateAge">点我修改年龄</button>
    </div>
</template>

<script>
    export default {
        name: "Student",
        data() {
            console.log(this);
            return {
                msg: '我是尚硅谷的学生',
                // vue 先接收 props 接收到的值，所以这里可以使用 this.age 获取到
                // 所以这里可以创建一个中转变量，方便我们自己对其进行操作
                myAge: this.age
            }
        },
        methods: {
            updateAge() {
                this.myAge++;
            }
        },
        // 简单声明接收，只声明自己需要接收哪些数据
        // props: ['name', 'age', 'sex']

        // 接收的同时对数据进行类型限制
        /*props: {
            name: String,
            age: Number,
            sex: String
        }*/

        // 接收的同时对数据进行类型限制 + 默认值的指定 + 必要性的限制
        props: {
            name: {
                type: String, // name 的类型是字符串
                required: true // name 是必要的
            },
            age: {
                type: Number,
                default: 99 // 默认值
            },
            sex: {
                type: String,
                required: true
            }
        }
    }
</script>